import { PropType } from 'vue'
import { TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * 播放状态
 */
export const NoticePlayStatuss = ['play', 'paused'] as const
export type NoticePlayStatus = typeof NoticePlayStatuss[number]

/**
 * 滚动方向模式
 */
export const NoticeModes = ['horizontal', 'vertical'] as const
export type NoticeMode = typeof NoticeModes[number]

/**
 * 基础样式
 */
export const noticeBasicProps = {
  /** 通知内容 */
  data: {
    type: Array as PropType<Array<string>>,
    default: () => {
      return []
    }
  },
  /** 播放状态 play 播放 paused 暂停 */
  playStatus: {
    type: String,
    default: 'play',
    validator: (value: NoticePlayStatus | '') => {
      return value === '' || NoticePlayStatuss.includes(value)
    }
  },
  /** 开启自动播放 */
  autoplay: {
    type: Boolean,
    default: true
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 左图标 */
  leftIcon: {
    type: String,
    default: ''
  },
  /** 右图标 */
  rightIcon: {
    type: String,
    default: ''
  },
  /** 左图标大小, 单位rpx */
  leftIconSize: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 左图标颜色, */
  leftIconColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 右图标大小, 单位rpx */
  rightIconSize: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 右图标颜色, */
  rightIconColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 自定义样式, 会覆盖配置的宽高和字体信息 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}

export const noticeBasicEmits = {
  /** 通知点击事件 */
  click: (index: number | string) => typeof index === 'string' || typeof index === 'number',
  /** 左图标点击事件 */
  'left-click': () => true,
  /** 右图标点击事件 */
  'right-click': () => true
}